<template>

    <div>

        <div id="message-panel">
            <!--<h3>消息列表</h3>-->
            <ul>
                <li v-for="message in messageList">
                    <span class="user-name">{{message.name}}：</span>
                    <span class="message-content">{{message.content}}</span>
                    <!--<span></span>-->
                </li>
            </ul>
            <textarea v-model="message"></textarea>
            <button @click="send">发送</button>
        </div>

        <div>
            姓名：<input type="text" v-model="name" />
            <br>
            id：<input type="number" v-model="userId" />
        </div>
    </div>

</template>

<script>
    'use strict';

    import {baseUtil} from "../common/js/BaseUtil";
    import websocketUtil from "../common/js/WebSocketUtil";

    export default {
        name: "Socket",
        props: {},
        data() {
            return {
                baseUtil: baseUtil,
                baseData: baseUtil.getBaseData(),
                websocketUtil: websocketUtil,

                name: '',
                userId: 0,

                message: '',

                messageList: [
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: '测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测1111试', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                    // {content: 'ceshi111', userId: 10, name: '张三'},
                ],

            }
        },
        computed: {},
        methods: {
            send(){
                this.websocketUtil.sendMessage("sendMessage", this.message, "test");
            },
            test(data) {
                // console.log(data);
                this.messageList.push(data.data);
                // console.log(data);
            }
        },
        created() {
            this.websocketUtil.initWebSocket(this, '99999');
        },
        destroyed(){

        },
        mounted() {
        }
    }
</script>

<style lang="scss" scoped>

    #message-panel{
        margin: 10px;
        /*padding: 10px 0;*/

        background-color: white;
        width: 300px;
        height: 600px;
        overflow: hidden;
        border: 1px #000 solid;

        position: relative;

        ul{
            padding: 0 10px;
            height: 538px;
            overflow: hidden;
            border: 1px #f4f4f4 solid;
            overflow-y: auto;

            li{
                margin: 3px 2px;
                font-size: 14px;
                animation: show 0.1s linear;

                span.user-name{
                    color: #f8c301;
                    cursor: pointer;

                    &:hover{
                        color: red;
                    }

                }

                span.message-content{
                    color: #000;
                }

            }
        }

        textarea{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 63.6%;
            height: 54px;
            font-size: 18px;
            padding: 3px 10px;
        }

        button{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 29.3%;
            height: 62px;
            cursor: pointer;
        }

    }

    @keyframes show {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

</style>
